<template>
	<view class="content" :style="{
      'padding-top': height + 'px',
      'box-sizing': 'border-box',
    }">
		<view :style="{
        width: '100%',
        height: statusBarHeight + 'px',
        background: '#f7f8fa',
        position: 'fixed',
        top: 0,
        zIndex: 100,
      }">
		</view>
		<view class="head" :style="{
        top: statusBarHeight + 'px',
        background: '#f7f8fa',
      }">
			<view class="head_left">
				<u-icon name="arrow-left" color="#444444" size="24" :bold="true" @click="toBack"></u-icon>
			</view>
			<view class="">
				{{ datas.name }}
			</view>
			<view class="head_right">
				<view class="zhuan">
					<image src="@/static/images/slices/icon_bai_zhunfa.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="box1" :style="{ marginTop: statusBarHeight + height + 'px' }">
			<view class="box_head">
				<view class="box_head_left">
					<image :src="datas.img_avatar_url" mode=""></image>
				</view>
				<view class="box_head_right">
					<view class="box_head_right_title">
						<view class="box_head_right_title_left">
							{{ datas.name }}
						</view>
						<view class="box_head_right_title_right">
							<image src="@/static/images/slices/icon_guanzhu_z.png" mode="" v-if="is_collect"
								@click="handCollect(2)"></image>
							<image src="@/static/images/slices/icon_tlzxq_guanzhu.png" mode="" v-else
								@click="handCollect(1)"></image>
							<view class="box_head_right_title_right_btn1" v-if="is_add" @click="handAdd(2)">
								<text style="margin-left: 10rpx">已加入</text>
							</view>
							<view class="box_head_right_title_right_btn" @click="handAdd(1)" v-else>
								<u-icon name="plus" color="#fff"></u-icon>
								<text style="margin-left: 10rpx">加入</text>
							</view>
						</view>
					</view>
					<view class="box_head_right_member">
						{{ datas.total_user }}成员
					</view>
				</view>
			</view>

			<view class="box_content">
				<view class="box_content_left">
					<view class="box_content_left_text">
						星球简介：{{ datas.introduce }}
					</view>
					<view class="box_content_left_text1">
						发言规则：{{ datas.rule }}
					</view>
				</view>
				<view class="box_content_right">
					<u-icon name="arrow-right" @click="toDetail"></u-icon>
				</view>
			</view>

			<view class="detailed" v-if="datas.kecheng && datas.kecheng.renwu_count" @click="toGuan">
				<view class="detailed_top">
					<view class="detailed_top_left">
						{{ datas.kecheng.name }}
					</view>
					<view class="detailed_top_right">
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
				<view class="detailed_bottom">
					{{ datas.kecheng.renwu_count }}个任务点
				</view>
			</view>
			<view class="detailed" v-if="datas.huodong_info" @click="toGuan">
				<view class="detailed_top">
					<view class="detailed_top_left">
						{{ datas.huodong_info.name }}
					</view>
					<view class="detailed_top_right">
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>

			</view>
			<view class="detailed" v-if="datas.renwu_info" @click="toGuan">
				<view class="detailed_top">
					<view class="detailed_top_left">
						{{ datas.renwu_info.name }}
					</view>
					<view class="detailed_top_right">
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
				<!-- <view class="detailed_bottom">
	      {{ datas.huodong.renwu_count }}个任务点
	    </view> -->
			</view>

			<view class="detailed" v-if="datas.tushu_info" @click="toGuan">
				<view class="detailed_top">
					<view class="detailed_top_left">
						{{ datas.tushu_info.name }}
					</view>
					<view class="detailed_top_right">
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
				<!-- <view class="detailed_bottom">
	      {{ datas.huodong.renwu_count }}个任务点
	    </view> -->
			</view>

			<!-- <view class="tabs_box">
				
			</view> -->
		</view>
		<view class="marginT"> </view>
		<view class="tabs_box">
			<view class="tabs_box_tab" style="flex: 1;">
				<u-tabs class="tabs" :list="list1" @click="tabClick" :activeStyle="{
					color: '#444',
					'font-size': '32rpx',
					marginLeft: '30rpx',
					marginRight: '30rpx',
				}" lineColor="#444444" :inactiveStyle="{
					color: '#888888',
					'font-size': '32rpx',
					marginLeft: '30rpx',
					marginRight: '30rpx',
				}"></u-tabs>
			</view>
			<view class="edit" v-if="shenfen == 3" @click="toEdit">
				<image src="@/static/images/icon_cjzb_tianjia.png"></image>
			</view>
		</view>
		<view class="tabs_box1">
			<view class="check_item" :class="currentIndex1 == index ? 'check_in' :''" v-for="(item,index) in tabsList"
				@click="handClick(index)">
				{{item}}
			</view>
		</view>
		<scroll-view :style="{
        height: scrollHeihgt + 'px',
        background: '#fff',
      }" :scroll-y="true" @scroll="scroll">
			<view class="scroll_box">
				<view class="scroll_item">
					<star title="研讨列表" :list="list" :userId="userId" type="start" :shenfen="shenfen" :xingheId="1 * id"
						@refresh="refresh" :zu="datas.zu"></star>
				</view>
				<!-- 发布研讨按钮 -->
				<view class="create_comment" @click="createDiscuss">
					<image src="@/static/images/icon_cjpl_chuangjian (2).png" mode=""></image>
				</view>
			</view>
		</scroll-view>
		<floatingBall></floatingBall>
	</view>
</template>

<script>
	import star from "@/components/search_co/star.vue"; //星河
	import {
		Detail,
		discussList,
		collect,
		jiaru
	} from "@/common/api/start.js";
	export default {
		components: {
			star,
		},
		data() {
			return {
				statusBarHeight: 0,
				height: 0,
				scrollHeihgt: 0,
				list1: [{
						name: "全部",
					},
					{
						name: "组务",
					},
					{
						name: "都江堰",
					},
					{
						name: "大熊猫",
					},
				],
				currentIndex: 0,
				datas: {},
				list: [],
				type: "",
				id: -1,
				is_collect: 0,
				is_add: 0,
				shenfen: 0,
				tabsList: ['最近', '热门','精华'],
				currentIndex1: 0,
				o_sort:1,
				userId:0
			};
		},
		created() {
			const statusBarHeight = uni.getSystemInfoSync(); // 获取手机状态栏高度

			const windowHeihgt = statusBarHeight.windowHeight;
			this.statusBarHeight = statusBarHeight.statusBarHeight;
			this.$nextTick(() => {
				uni
					.createSelectorQuery()
					.select(".head")
					.boundingClientRect((data) => {
						this.height = data.height;
					})
					.exec();
			});
		},
		onLoad(options) {
			if (options && (options.id || options.currentId)) {
				this.id = options.id || options.currentId;
				this.getDetail();
			}
		},
		onShow() {
			this.getList();
			if (this.id) {
				this.getDetail();
			}
		},
		methods: {
			handClick(index) {
				this.currentIndex1 = index;
				this.o_sort = index + 1;
				this.getList();
			},
			getScroll() {
				const statusBarHeight = uni.getSystemInfoSync(); // 获取手机状态栏高度

				const windowHeihgt = statusBarHeight.windowHeight;
				this.statusBarHeight = statusBarHeight.statusBarHeight;
				this.$nextTick(() => {
					setTimeout(() => {
						const query = uni.createSelectorQuery().in(this);
						query.select(".head").fields({
							size: true,
						});
						query.select(".box1").fields({
							size: true,
						});
						query.select(".marginT").fields({
							size: true,
						});
						query.select(".tabs_box").fields({
							size: true,
						});
						query.select(".tabs_box1").fields({
							size: true,
						});
						query.exec((data) => {
							let sum = 0;
							console.log("data", data, this.height, this.statusBarHeight);
							data.forEach((item) => {
								sum += item.height;
							});
							this.scrollHeihgt = windowHeihgt - sum - 18;
						});
					}, 200);

					// .boundingClientRect(data => {
					// 	console.log('data', data);
					// 	// this.scrollHeihgt = data.height;
					// }).exec()
				});
			},
			handCollect(type) {
				collect({
					id: this.id,
					type,
				}).then((res) => {
					if (type == 2) {
						this.is_collect = 0;
					} else {
						this.is_collect = 1;
					}
					console.log("ressssss666?", res);
				});
			},
			handAdd(type) {
				let that = this;
				if (type == 2) {
					uni.showModal({
						title: "提示",
						content: "是否退出该星球",
						success: function(res) {
							if (res.confirm) {
								jiaru({
									id: that.id,
									type,
								}).then((res) => {
									that.is_add = 0;

									console.log("ressss", res);
								}).catch(err => {
									this.$u.toast(err);
								})
							} else if (res.cancel) {
								return;
							}
						},
					});
				} else {
					jiaru({
						id: this.id,
						type,
					}).then((res) => {
						this.is_add = 1;

						console.log("ressss", res);
					}).catch(err => {
						this.$u.toast(err);
					})
				}
			},
			getDetail(id) {
				Detail({
					id: this.id,
				}).then((res) => {
					console.log("ressss", res.data.detail);
					this.datas = res.data.detail.info;
					this.shenfen = res.data.detail.shenfen;
					const list1 = res.data.detail.info.zu_arr.map((item) => {
						return {
							name: item,
						};
					});
					this.list1 = [{
							name: "全部",
						},
						...list1,
					];
					this.is_add = res.data.detail.is_add;
					this.is_collect = res.data.detail.is_collect;
					this.getScroll();
				});
			},
			toGuan() {
				console.log('tttttttt', this.datas);
				if (this.datas.huodong_info) {
					uni.navigateTo({
						url: "/pages/detail/wenDetail?id=" + this.datas.huodong_info.id
					})
				} else if (this.datas.renwu_info) {
					uni.navigateTo({
						url: "/pages/character/characterDetail?id=" + this.datas.renwu_info.id
					})
				} else if (this.datas.tushu_info) {
					uni.navigateTo({
						url: "/pages/book/detail?id=" + this.datas.tushu_info.id
					})
				} else if (this.datas.kecheng) {
					uni.navigateTo({
						url: "/pages/training/detail?type=" + this.datas.kecheng.type + "&id=" + this.datas.kecheng
							.id
					})
				}
			},
			refresh() {
				this.getList();
			},
			getList(id) {
				discussList({
					id: this.id,
					zu_name: this.type,
					o_sort:this.o_sort
				}).then((res) => {
					console.log("ressss222", res);
					this.list = res.data.detail.data;
					this.userId = res.data.userInfo.user_id;
				});
			},
			toDetail() {
				uni.navigateTo({
					url: "/pages/distinguish/StartGroup?id=" + this.id,
				});
			},
			toBack() {
				uni.navigateBack({
					delta: 1,
				});
			},
			tabClick(e) {
				console.log("111111", e);
				if (e.name == "全部") {
					this.type = "";
				} else {
					this.type = e.name;
				}
				this.currentIndex = e.index;

				this.getList();
			},
			createDiscuss() {
				uni.navigateTo({
					url: "/pages/distinguish/createDiscuss?id=" +
						this.id +
						"&zu=" +
						this.datas.zu +
						"&shenfen=" +
						this.shenfen,
				});
			},
			toEdit() {
				console.log("resssss", this.datas.id);
				uni.navigateTo({
					url: "/pages/distinguish/createStart?id=" + this.datas.id,
				});
			},
			scroll(e) {},
		},
	};
</script>

<style scoped lang="scss">
	.content {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: #f7f8fa;
		box-sizing: border-box;
	}

	.head {
		width: 100%;
		padding: 18rpx 30rpx 47rpx;
		position: fixed;
		display: flex;
		justify-content: center;
		align-items: center;
		box-sizing: border-box;
		z-index: 99;

		.head_left {
			position: absolute;
			left: 30rpx;
		}

		.head_right {
			position: absolute;
			right: 30rpx;
			color: #55b877;
		}

		.text {
			font-size: 36rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: 400;
			color: #444444;
		}
	}

	.zhuan {
		width: 40rpx;
		height: 38rpx;
		margin-left: 40rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.box {
		padding: 0 30rpx;
		box-sizing: border-box;
	}

	.box1 {
		padding: 0 30rpx;
		box-sizing: border-box;

		.box_head {
			width: 100%;
			display: flex;

			margin-top: 24rpx;

			.box_head_left {
				width: 124rpx;
				height: 124rpx;

				image {
					width: 100%;
					height: 100%;
					border-radius: 16rpx;
				}
			}

			.box_head_right {
				flex: 1;
				padding-left: 24rpx;
				box-sizing: border-box;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.box_head_right_title {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.box_head_right_title_left {
						font-size: 32rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						color: #474747;
					}

					.box_head_right_title_right {
						display: flex;
						align-items: center;

						image {
							width: 46rpx;
							height: 46rpx;
							margin-right: 24rpx;
						}

						.box_head_right_title_right_btn {
							width: 142rpx;
							height: 56rpx;
							background: #55b877;
							border-radius: 32rpx 32rpx 32rpx 32rpx;
							font-size: 26rpx;
							color: #ffffff;
							display: flex;
							justify-content: center;
							align-items: center;
						}

						.box_head_right_title_right_btn1 {
							width: 142rpx;
							height: 56rpx;
							background: #eee;
							border-radius: 32rpx 32rpx 32rpx 32rpx;
							font-size: 26rpx;
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							color: #888888;
							display: flex;
							justify-content: center;
							align-items: center;
						}
					}
				}
			}
		}

		.box_head_right_member {
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #888888;
		}

		.box_content {
			width: 100%;
			display: flex;
			margin-top: 48rpx;

			.box_content_right {
				width: 38rpx;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: flex-end;
			}

			.box_content_left {
				flex: 1;

				.box_content_left_text {
					font-size: 26rpx;
					color: #474747;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 3;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				.box_content_left_text1 {
					font-size: 26rpx;
					color: #474747;
					margin-top: 26rpx;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 3;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}
		}

		.detailed {
			width: 100%;
			padding: 32rpx;
			box-sizing: border-box;
			background: #fff;
			margin-top: 40rpx;

			.detailed_top {
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.detailed_top_left {
					font-size: 32rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #474747;
				}
			}

			.detailed_bottom {
				font-size: 26rpx;
				color: #adadad;
				margin-top: 16rpx;
			}
		}
	}

	.marginT {
		width: 100%;
		height: 40rpx;
	}

	/deep/.u-tabs {
		// width: 100%;
	}

	.tabs_box {
		width: 100%;
		height: 88rpx;
		border-bottom: 1rpx solid #eee;
		display: flex;
		align-items: center;
		box-sizing: border-box;
		.tabs_box_tab{
			width: 100vw;
		}
		.edit {
			width: 150rpx;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;

			image {
				width: 104rpx;
				height: 56rpx;
			}
		}
	}

	.scroll_box {
		width: 100%;
		// padding: 88rpx 0 0;
		// padding: 22rpx 0 0;
		box-sizing: border-box;
		position: relative;

		.scroll_item {
			margin-top: 32rpx;
		}

		.create_comment {
			width: 124rpx;
			height: 124rpx;
			position: fixed;
			right: 30rpx;
			bottom: 50rpx;
			z-index: 99999;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.tabs_box1 {
		width: 100%;
		padding: 24rpx 30rpx 32rpx;
		box-sizing: border-box;
		display: flex;
		background: #fff;

		.check_item {
			padding: 7rpx 30rpx;
			border-radius: 32rpx 32rpx 32rpx 32rpx;
			background: #eee;
			color: #888;
			margin-right: 16rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: rgb(173, 173, 173);
		}

		.check_in {
			background: #55b877;
			color: #fff;
		}
	}
</style>